<template>
	<view class="teachmain">
		<uni-nav-bar shadow title="" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#f8f8f8" :shadow="false" left-icon="left">
			<view class="input-view" style="background: white;width: 500rpx;">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input style="width: 500rpx;" class="uni-input" placeholder="输入搜索关键词" v-model="search" 
					@input="getListData" />
				<icon type="clear" v-if="showClearIcon" @click="clearIcon" size="16" />
			</view>
			<view @click="quxiao" style="position: absolute;right:44rpx;font-size:30rpx;top: 24rpx;">取消</view>
		</uni-nav-bar>
		
		<view>
			<uni-collapse style="overflow-x: hidden;" ref="collapse" accordion v-model="value" @change="change">
				<uni-collapse-item v-for="(item,index) in teacherList" :key='index'>
					<template slot="title">
						<view class='TeacherItem'>
							<view class="left">
								<image :src="item.avatar" mode=""></image>
								<view class="">
									{{item.name}}
								</view>
							</view>
							<view class="right">
								<view class="title">
									<text class="daibiao">代表作品</text>
									<text v-show="show[index]=='false' " @click="showMainInf(item)"> 更多 </text>
										<text v-show="show[index]=='true' " > 收起 </text>
								</view>
								<view class="fileList">
									<view v-for="(i,n) in item.experts_works" :key='n' class="fileItem">
										<image :src="i.image" mode=""></image>
										<view>{{i.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
			
					<view class="content">
						<text v-for="(i,index) in teacherInfo.content" :key='index' class="text">{{i}}</text>
					</view>
				</uni-collapse-item>
			
			</uni-collapse>
			<view v-show="teacherList.length==0" style="text-align: center;  margin: 20rpx;" class="">
				暂无内容
			</view>
		</view>
		

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import wanlShopCategory from '@/components/wanl-shop/category';	
	import jssdk from '@/common/libs/jssdk.js'
	import share from '@/shopro/share/index.js'
	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
			wanlShopCategory
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},

		data() {
			return {
				headHeight: 75,
				windowHeight: 0,
				teacherInfo: {},
				showMore:false,
				headTop: 0,
				page: 1,
				value: '1',
				search: '',
				show:[],
				teacherList: [],
				showClearIcon:false,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				}
			};
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
			this.getListData()
		},
		onReady() {
			// 判断网络类型
			uni.getNetworkType({
				success: res => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		},
		methods: {
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			
				this.getListData()
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			setShare() {
				let link
				let shareId = uni.getStorageSync('userInfo').id
					
				if(shareId){
					this.SpmResult = share.setShareInfo({
						title: "师资团队",
						desc: '点击查看详情',
						image:'https://wap.chajiaoyu.com/static/images/yicha/teaShare.png',
						params: {
							page: 2,
							pageId: '',
							shareId: shareId
						}
					});
					
					link = window.location.href + '?isShare=true&userid=' + shareId + '&' + this.SpmResult.query
				}else{
					link = window.location.href
				}
			console.log("sss",this.id,link)
			
				jssdk.share({
				title: "师资团队",
				desc: '点击查看详情',
				link: link,
				imgUrl: 'https://wap.chajiaoyu.com/static/images/yicha/teaShare.png',
				type: '4',
				id: this.id
				})
			},
			change(e) {
				console.log(e);
					
				if(e==''){
						this.show[ this.value]=this.show[this.value]=='false'?'true':'false'
				}else{
					this.value=e
					
					this.show[ Number(e)]=this.show[Number(e)]=='false'?'true':'false'
				}
			},
			getListData() {
				let vm = this
				vm.$api.get({
					url: '/experts/pageList',
					data: {
						page: vm.page,
						search: vm.search
					},
					success: res => {
						console.log(res)
						vm.teacherList = res.list.data
						vm.teacherList.forEach((i,n)=>{
								
								vm.show.push('false')
						})
						console.log(vm.show)
						vm.setShare()
						// this.BannerList = res.banner
					}
				})
			},

			showMainInf(i) {
				let vm = this
				vm.$api.post({
					url: '/experts/info',
					data: {
						experts_id: i.id
					},
					success: res => {
						console.log(res)
						vm.teacherInfo = res
						vm.showMore =true
						// vm.teacherList = res.list.data
						// this.BannerList = res.banner
					}
				})
			},



		}
	};
</script>

<style lang="scss">
	.teachmain {
		.teachtap {
			height: 188rpx;
			background: #FFFFFF;
			position: relative;
			position: fixed;
			z-index: 999999999999;
			width: 100%;
			.inputserch {
				position: fixed;
				top: 115rpx;
				left: 50%;
				margin-left: -315rpx;
				width: 630rpx;
				height: 60rpx;
				border: 1rpx solid #E3DEBF;
				border-radius: 50px;
			}
		}

		.TeacherItem {
			display: flex !important;
			width: 710rpx;
			height: 228rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: 10rpx 20rpx 0;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			text-align: center;

			.right {
				.daibiao {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 36rpx;
					color: #333333 !important;
					// text-shadow: 0px 0px 48rpx rgba(151, 151, 151, 0.2);
					// opacity: 1;
				}

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						color: #777;
					}
				}
			}

			.left {
				margin-right: 30rpx;

				image {
					width: 124rpx;
					height: 124rpx;
				}

			}

			.fileList {
				overflow: hidden;
				white-space: nowrap;
				width: 500rpx;
				margin-top: 20rpx;
				text-align: left;

				.fileItem {
					display: inline-block;
					width: 20%;
					text-align: center;

					view {}

					// height: ;
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx 20rpx 50rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 50rpx;

			.text {
				position: relative;
			}

			.text::before {
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				background: #7DCDD1;
				// box-shadow: 0px 0px 24px 1px rgb(151 151 151 / 20%);
				opacity: 1;
				clear: both;
				content: '';
				border-radius: 50%;
				left: -34rpx;
				margin: auto;
				/* right: 0; */
				top: 0;
				bottom: 0;
			}
		}

		.content::before {}
			
		.cu-custom{
			line-height: 90rpx;
		}
	}
	/deep/.uni-navbar__header-btns-left{
		width: 40rpx!important;
	}
</style>
